<template>
  <view class="page container">
    <u-form
      :model="basicForm"
      :rules="rules"
      labelPosition="top"
      ref="form"
      labelWidth="auto"
      :labelStyle="{
        fontSize: '14px',
        color: '#B2B2B2',
        lineHight: '20px',
      }"
    >
      <view class="basic-style">
        <template v-if="!contentflag">
          <u-form-item label="关联费用报销单" prop="relReimbursementBillId" required>
            <h-select-finance-reimbursement-bill-input-popup
              ref="projectSelect"
              :disabled="!teamId"
              v-model="basicForm.relReimbursementBillId"
              :applicant="companyId"
              :teamId="teamId"
              :checkStatus="2"
              :isBalanced="'0'"
              @realChange="getBillInfo"
              style="width: 100%"
              placeholder="请选择关联费用报销单"
              border="surround"
              suffixIcon="arrow-down-fill"
              :suffixIconStyle="{ color: '#B2B2B2' }"
            />
          </u-form-item>
          <u-form-item label="应付（元）" prop="payableAmount" required>
            <u--input
              disabled
              v-model="basicForm.payableAmount"
              v-number-normal
              placeholder="请输入应付金额"
              @change="inputAmount"
            ></u--input>
          </u-form-item>
          <u-form-item label="已付（元）" prop="paidAmount" required>
            <u--input disabled v-model="basicForm.paidAmount" v-number-normal placeholder="请输入已付金额" @change="inputAmount"></u--input>
          </u-form-item>
          <u-form-item label="扣款（元）" prop="deductionAmount" required>
            <u--input
              disabled
              v-model="basicForm.deductionAmount"
              v-number-normal
              placeholder="请输入扣款金额"
              @change="inputAmount"
            ></u--input>
          </u-form-item>
          <u-form-item label="本次扣款（元）" prop="currentDeductionAmount">
            <h-money-input
              placeholder="请输入本次扣款金额"
              v-model="basicForm.currentDeductionAmount"
              @change="inputAmount"
            ></h-money-input>
          </u-form-item>
          <u-form-item label="本次支付（元）" prop="currentPaidAmount" required>
            <h-money-input placeholder="请输入本次支付金额" v-model="basicForm.currentPaidAmount" @change="inputAmount"></h-money-input>
          </u-form-item>
          <u-form-item label="未付款（元）" prop="unpaidAmount" required>
            <u--input disabled v-model="basicForm.unpaidAmount" v-number-normal placeholder="请输入未付款金额"></u--input>
          </u-form-item>
        </template>
        <template v-if="contentflag">
          <u-form-item label="项目名称" prop="projectId">
            <h-select-project-input-popup
              ref="projectSelect"
              :disabled="!teamId"
							:queryParamType="'1'"
              v-model="basicForm.projectId"
              :signUnit="companyId"
              :teamId="teamId"
              @change="proChange"
              style="width: 100%"
              placeholder="请选择项目名称"
              border="surround"
              suffixIcon="arrow-down-fill"
              :suffixIconStyle="{ color: '#B2B2B2' }"
            />
          </u-form-item>
					<u-form-item label="项目编号" prop="projectCode">
						<u--input disabled placeholder="请输入项目编号" v-model="basicForm.projectCode"></u--input>
					</u-form-item>
					<u-form-item label="业绩归属年度" prop="projectYear">
					  <h-select-input-tag
							disabled
							class="w-100"
					    v-model="basicForm.projectYear"
					    placeholder="请选择业绩归属年度"
					    border="surround"
					    dictName="yjgsnd"
					    suffixIcon="arrow-down-fill"
					    :suffixIconStyle="{ color: '#B2B2B2' }"
					  />
					</u-form-item>
          <u-form-item label="合同类型" prop="contractType">
            <h-select-input-tag
              class="w-100"
              v-model="basicForm.contractType"
              placeholder="请选择合同类型"
              border="surround"
              dictName="contract_type"
              suffixIcon="arrow-down-fill"
              :suffixIconStyle="{ color: '#B2B2B2' }"
              @change="selectContract"
            />
          </u-form-item>
          <u-form-item label="合同名称" prop="contractId" v-if="basicForm.contractType == '1'">
            <h-select-contract-manager-input-popup
              showName="1"
              htlx="2"
              :disabled="!teamId || !companyId"
              :projectId="basicForm.projectId"
              :signUnit="basicForm.projectId ? null : companyId"
              :jytd="basicForm.projectId ? null : teamId"
              v-model="basicForm.contractId"
              placeholder="请选择合同"
							:title="'请选择关联付款合同'"
              border="surround"
              style="width: 100%"
              suffixIcon="arrow-down-fill"
              :suffixIconStyle="{ color: '#B2B2B2' }"
              ></h-select-contract-manager-input-popup>
              <!-- @change="contractChange" -->
          </u-form-item>
          <u-form-item label="合同名称" prop="contractId" v-if="basicForm.contractType == '2'">
            <h-select-purchase-contract-input-popup
              showName="1"
              htlx="2"
              :disabled="!teamId || !companyId"
              :projectId="basicForm.projectId"
              :demandCompanName="basicForm.projectId ? null : companyId"
              :teamId="basicForm.projectId ? null : teamId"
              :muitFlag="true"
              v-model="basicForm.contractId"
              placeholder="请选择采购合同"
							:title="'请选择关联采购合同'"
              border="surround"
              style="width: 100%"
              suffixIcon="arrow-down-fill"
              :suffixIconStyle="{ color: '#B2B2B2' }"
            />
          </u-form-item>
          <u-form-item label="本次预付金额（元）" prop="currentPaidAmount" required>
            <h-money-input placeholder="请输入本次预付金额" v-model="basicForm.currentPaidAmount" @change="inputAmount"></h-money-input>
            <!-- <u--input v-model="basicForm.currentPaidAmount" v-number-normal placeholder="请输入本次预付金额"></u--input> -->
          </u-form-item>
        </template>
      </view>

      <view class="space-x-1 mt-1" style="display: flex">
        <u-button type="primary" text="保存" :loading="loading" @click="onSubmit"></u-button>
        <u-button type="primary" text="关闭" :loading="loading" @click="onClose"></u-button>
      </view>
    </u-form>
  </view>
</template>

<script>
export default {
  name: 'BillForm',
  props: {
    teamId: {
      type: [String, Number],
      default: '',
    },
    companyId: {
      type: [String, Number],
      default: '',
    },
    // 表单禁用
    disabled: {
      type: Boolean,
      default: false,
      required: false,
    },
    isRelProject: {
      type: Boolean,
      default: false,
    },
    datailDisabled: {
      type: Boolean,
      default: false,
    },
    formType: {
      type: String,
      default: 'trip',
    },
    contentflag: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      loading: false,
      // contentflag: false, //是否预付款
      basicForm: {
        id: '',
        projectId: '', //项目名称id
        projectName: '', //项目名称
        contractType: '', //合同类型
        contractId: '', //合同名称id
        contractName: '', //合同名称
        // payableAmount: 0, //应付（元）
        // paidAmount: 0, //已付（元）
        // deductionAmount: 0, //扣款（元）
        // currentPaidAmount: 0, // 本次支付（元） 本次预付金额（元）
        currentDeductionAmount: 0, //本次扣款（元）
        // unpaidAmount: 0, //未付款（元）
      },
      rules: {
        // contractType: [{ required: true, message: '请选择合同类型!', trigger: ['blur', 'change'] }],
        payableAmount: [
          {
            required: true,
            pattern: /^(([1-9][0-9]*|0)|([0]\.\d{0,2}|[1-9][0-9]*\.\d{0,2}))$/,
            message: '请输入正确的金额!',
            trigger: ['blur', 'change'],
          },
        ],
        paidAmount: [
          {
            required: true,
            pattern: /^(([1-9][0-9]*|0)|([0]\.\d{0,2}|[1-9][0-9]*\.\d{0,2}))$/,
            message: '请输入正确的金额!',
            trigger: ['blur', 'change'],
          },
        ],
        deductionAmount: [
          {
            required: true,
            pattern: /^(([1-9][0-9]*|0)|([0]\.\d{0,2}|[1-9][0-9]*\.\d{0,2}))$/,
            message: '请输入正确的金额!',
            trigger: ['blur', 'change'],
          },
        ],
        currentDeductionAmount: [
          {
            required: false,
            pattern: /^(([1-9][0-9]*|0)|([0]\.\d{0,2}|[1-9][0-9]*\.\d{0,2}))$/,
            message: '请输入正确的金额!',
            trigger: ['blur', 'change'],
          },
        ],
        currentPaidAmount: [
          {
            required: true,
            pattern: /^(?!0\.00)(?!0$)([1-9]\d*|0)(\.\d{2})?$/,
            message: '请输入正确的金额!',
            trigger: ['blur', 'change'],
          },
        ],
        unpaidAmount: [
          {
            required: true,
            pattern: /^(([1-9][0-9]*|0)|([0]\.\d{0,2}|[1-9][0-9]*\.\d{0,2}))$/,
            message: '未付款金额不正确!',
            trigger: ['blur', 'change'],
          },
        ],
        relReimbursementBillId: [{ required: true, message: '请输入关联费用报销单!', trigger: ['blur', 'change'] }],
        reimbursementFeeType: [{ required: true, message: '请输入费用报销类别!', trigger: ['blur', 'change'] }],
      },
    }
  },
  mounted() {
    // this.$refs.basicForm.resetFields()
  },
  methods: {
    //输入金额
    inputAmount() {
      let unpaidAmount = (
        this.basicForm.payableAmount -
        this.basicForm.paidAmount -
        this.basicForm.deductionAmount -
        this.basicForm.currentDeductionAmount -
        this.basicForm.currentPaidAmount
      ).toFixed(2)
      if (
        (!!this.basicForm.payableAmount || this.basicForm.payableAmount == 0) &&
        (!!this.basicForm.paidAmount || this.basicForm.paidAmount == 0) &&
        (!!this.basicForm.deductionAmount || this.basicForm.deductionAmount == 0) &&
        (!!this.basicForm.currentDeductionAmount || this.basicForm.currentDeductionAmount == 0) &&
        (!!this.basicForm.currentPaidAmount || this.basicForm.currentPaidAmount == 0)
      ) {
        this.$set(this.basicForm, 'unpaidAmount', unpaidAmount)
      }
      this.$set(this.basicForm, 'onChargedAmount', 0)
      this.$set(this.basicForm, 'unChargedAmount', this.basicForm.currentPaidAmount)
    },
    //获得费用报销单信息
    getBillInfo(data) {
      if (data) {
        let paidAmount = 0
        paidAmount = data.totalPayAmount + data.chargedAmount
        this.$set(this.basicForm, 'deductionAmount', data.deductionAmount)
        this.$set(this.basicForm, 'paidAmount', paidAmount.toFixed(2))
        this.$set(this.basicForm, 'payableAmount', data.reimbursementAmount)
        if (this.basicForm.currentPaidAmount) {
          this.$set(this.basicForm, 'currentPaidAmount', 0)
          this.$set(this.basicForm, 'unpaidAmount', 0)
        }
        if (this.basicForm.currentDeductionAmount) {
          this.$set(this.basicForm, 'currentDeductionAmount', 0)
          this.$set(this.basicForm, 'unpaidAmount', 0)
        }
		this.$forceUpdate()
      }
    },
    //切换合同类型
    selectContract(data) {
      if (data) {
        if (this.basicForm.contractId) {
          this.$set(this.basicForm, 'contractId', null)
        }
      }
    },
    proChange(data) {
      //获取项目信息
      this.$set(this.basicForm, 'contractId', null)
			this.$set(this.basicForm, 'projectCode', data?.finalNo || '')
			this.$set(this.basicForm, 'projectYear', data?.year || '')
      if (data) {
        //如果删除项目，需要重置合同
        if (!data) {
          this.$set(this.basicForm, 'contractId', null)
        }
        if (this.basicForm.contractId) {
          this.$set(this.basicForm, 'contractId', null)
        }
      }
    },
    reset() {
      this.$refs.form.resetFields()
    },
    async onSubmit() {
      await this.$refs.form.validate()
      if (!this.index) {
        this.$emit('submit', [
          {
            id: parseInt(Math.random() * 1000000000000),
            ...this.basicForm,
          },
          this.index,
        ])
      } else {
        this.$emit('submit', [this.basicForm, this.index])
      }
      this.reset()
    },
    onClose() {
      this.$emit('close')
      this.reset()
    },
  }
}
</script>

<style scoped></style>
